<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search v-model="searchData" input-align="center" placeholder="商品搜索 共239亿款好物" />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" width="3.75rem" height="200">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="swipe_img" v-lazy="image.image_url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 五个图标 -->
    <van-grid :column-num="5">
      <van-grid-item v-for="(item, index) in channel" :key="index" :icon="item.icon_url" :text="item.name" />
    </van-grid>
    <!-- 品牌制造商直供 -->
    <div class="brand">
      <h2>品牌制造直供</h2>
      <div class="brand_items">
        <div class="brand_item" v-for="(item, index) in brandList" :key="index">
          <img :src="item.new_pic_url" alt="">
          <h2>{{item.name}}</h2>
          <h3>{{item.floor_price}}元起</h3>
        </div>
      </div>
    </div>
    <!-- 新品首发 -->
    <div class="newBrand">
      <h2>周一周四 新品首发</h2>
      <div class="brand_items">
        <div class="brand_item" v-for="(item, index) in newGoodsList" :key="index">
          <img :src="item.list_pic_url" alt="">
          <h2>{{item.name}}</h2>
          <h3>￥{{item.retail_price}}</h3>
        </div>
      </div>
    </div>
    <!-- 人气面板 -->
    <div class="hotlist">
      <h2 class="hot_title">人气推荐</h2>
      <van-card v-for="(item, index) in hotGoodsList" :key="index"
        :price="item.retail_price"
        :desc="item.goods_brief"
        :title="item.name"
        :thumb="item.list_pic_url"
      >
      </van-card>
    </div>
    <!-- 专题轮播 -->
    <div class="swipe">
      <h2>专题精选</h2>
      <van-swipe :autoplay="3000" width="3.75rem" height="270" :show-indicators="false">
      <van-swipe-item v-for="(item, index) in topicList" :key="index">
        <img class="swipe_img" v-lazy="item.scene_pic_url" />
        <h3>{{item.title}} <span>￥{{item.price_info}}元起</span></h3>
        <h4>{{item.subtitle}}</h4>
      </van-swipe-item>
    </van-swipe>
    </div>
    <!-- 居家 -->
    <div class="newBrand newClassify" v-for="(item, index) in categoryList" :key="index">
      <h2>{{item.name}}</h2>
      <div class="brand_items">
        <div class="brand_item" v-for="(item2, index2) in item.goodsList" :key="index2">
          <div class="classify_img">
            <img :src="item2.list_pic_url" alt="">
          </div>
          <h2>{{item2.name}}</h2>
          <h3>￥{{item2.retail_price}}</h3>
        </div>
      </div>
    </div>
    <div class="space"></div>
    <!-- 导航栏 -->
    <Navigation></Navigation>
  </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'vant'
import Navigation from './Navigation.vue'
// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true
})
export default {
  async created () {
    const { data: res } = await this.$http.get('index/index')
    this.images = res.data.banner
    this.channel = res.data.channel
    this.brandList = res.data.brandList
    this.newGoodsList = res.data.newGoodsList
    this.hotGoodsList = res.data.hotGoodsList
    this.topicList = res.data.topicList
    this.categoryList = res.data.categoryList
    // console.log(res.data)
  },
  data () {
    return {
      searchData: '',
      images: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: []
    }
  },
  components: {
    Navigation
  }
}
</script>

<style lang="less" scoped>
.home{
  background-color: #f4f4f4;
  .swipe_img{
    width: 100%;
    height: 100%;
  }
  .brand{
    margin-top: 0.2rem;
    background-color: #fff;
    h2{
      font-size: .2rem;
      text-align: center;
      padding: .2rem 0;
    }
    .brand_items{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: .15rem;
      .brand_item{
        width: 49.5%;
        border: 1px solid #eee;
        margin-top: .05rem;
        position: relative;
        img{
          width: 100%;
        }
        h2{
          position: absolute;
          top: .2rem;
          left: .2rem;
          font-size: .28rem;
        }
        h3{
          position: absolute;
          top: .8rem;
          left: .2rem;
          font-size: .22rem;
          color: #999;
        }
      }
    }
  }
  .newBrand{
    background-color: #fff;
    margin-bottom: 0.2rem;
    h2{
      font-size: .2rem;
      text-align: center;
      padding: .3rem 0;
    }
    .brand_items{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: .15rem;
      .brand_item{
        width: 50%;
        border: 1px solid #eee;
        margin-top: .05rem;
        position: relative;
        img{
          width: 100%;
        }
        h2{
          font-size: .16rem;
        }
        h3{
           text-align: center;
           color: red;
           font-size: .13rem;
        }
      }
    }
  }
  .hotlist{
    background-color: #fff;
    .hot_title{
      font-size: .2rem;
      text-align: center;
      padding: .3rem 0;
    }
    .van-card__title{
      font-size: 0.3rem;
      font-weight: 600;
      padding: 0.2rem 0;
    }
    .van-card__price-integer,.van-card__price-currency{
      color: red;
    }
  }
  .swipe{
    background-color: #fff;
    margin: 0.2rem 0;
    h2{
      font-size: .3rem;
      text-align: center;
      padding: .3rem 0;
    }
    .van-swipe-item{
      padding: 0.2rem;
      .swipe_img{
        height: 70%;
      }
      h3{
        text-align: left;
        font-size: .3rem;
        padding: .1rem 0;
        span{
          color: red;
        }
      }
      h4{
        font-size: .12rem;
        color: #999;
      }
    }
  }
  .newClassify{
    .brand_items{
      .brand_item{
        padding: 0.2rem;
        border: none;
        .classify_img{
          background: #fbf9f5;
        }
      }
    }
  }
  .space{
    height: 1rem;
  }
}
</style>
